    // 定义一个名为 BookForm 的对象，用作 Vue 组件
const BookForm = {
    // 组件名称
    name: 'BookForm', // 组件模板
    template: `  
    <div v-if="visible" class="modal">  
      <div class="modal-overlay" @click="close"></div>  
      <div class="modal-content">  
        <header class="modal-header">  
          <h2>{{ formData.id ? '编辑图书' : '添加图书' }}</h2>  
          <button class="close-button"  @click="close">×</button> <!-- 右侧 -->
        </header>  
        <form @submit.prevent="submitForm">  
          <input type="hidden" v-model="formData.id">  
 
          <!-- 表单输入字段 -->
           <!--           ... //省略部分代码-->
             <div class="form-group">
            <label for="title">书名:</label>
            <input type="text" id="title" v-model="formData.title" required>
          </div>
          <div class="form-group">
            <label for="isbn">ISBN:</label>
            <input type="text" id="isbn" v-model="formData.isbn" required>
          </div>
          <div class="form-group">
            <label for="author">作者:</label>
            <input type="text" id="author" v-model="formData.author" required>
          </div>
          <div class="form-group">
            <label for="publisher">出版社:</label>
            <input type="text" id="publisher" v-model="formData.publisher" required>
          </div>
          <div class="form-group">
            <label for="publicationYear">出版年份:</label>
            <input type="number" id="publicationYear" v-model="formData.publicationYear" required>
          </div>
          <div class="form-group">
            <label for="language">语言:</label>
            <input type="text" id="language" v-model="formData.language" required>
          </div>
          <div class="form-group">
            <label for="genre">类别:</label>
            <input type="text" id="genre" v-model="formData.genre" required>
          </div>
          <div class="form-group">
            <label for="location">存放位置:</label>
            <input type="text" id="location" v-model="formData.location" required>
          </div>
          <div class="form-group">
            <label for="status">状态:</label>
            <input type="number" id="status" v-model="formData.status" required>
          </div>
           
           <div class="form-group full-width">  
            <!--  文件上传组件，传入fileUrl地址-->
            <file-upload :fileUrl="formData.attachFileUrl" 
             @upload-success="handleAttachFileUpload"
             @delete-success="handleAttachFileDelete">
             </file-upload>
          </div>  
          
            <div class="form-group full-width">
<!--              图片上传组件，传入fileUrl地址-->
            <image-upload :fileUrl="formData.coverUrl" 
             @upload-success="handleCoverUpload"
             @delete-success="handleCoverDelete">
             </image-upload>
          </div>  
          
          <div class="form-group submit">  
            <input type="submit" :value="formData.id ? '更新图书' : '添加图书'">  
          </div>  
        </form>  
      </div>  
    </div>  
  `, // 局部注册组件
    components: {
        FileUpload, ImageUpload
    },

    // 组件属性
    props: {
        // 控制表单弹窗的显示与隐藏
        visible: {
            type: Boolean, default: false
        }, // 从父组件传入的图书数据
        bookData: {
            type: Object, default: () => ({})
        }
    }, // 自定义事件
    emits: ['update:visible', 'submit'], // 组件设置函数
    setup(props, {emit}) {
        // 表单数据的初始值
        const initialValue = {
            title: '22',
            isbn: '3333',
            author: '333',
            publisher: '中国文学出版社',
            publicationYear: 2023,
            language: '中文',
            genre: '文学',
            location: '理科1室',
            status: 1,
        }

        // 使用 Vue.ref 创建响应式表单数据对象
        const formData = Vue.ref({})

        // 提交表单
        const submitForm = () => {
            emit('submit', {...formData.value});
            // close();
        };

        // 图片上传成功回调
        const handleCoverUpload = (uploadFile) => {
            console.log("图片上传完成");
            // 将上传成功的文件 URL 赋值给 formData.coverUrl
            formData.value.coverUrl = uploadFile.fileUrl;
        };
        // 图片删除成功回调
        const handleCoverDelete = () => {
            // 将文件 URL 赋值给 formData.coverUrl
            formData.value.coverUrl = '';
        };
        // 文件上传成功回调
        const handleAttachFileUpload = (uploadFile) => {
            formData.value.attachFileUrl = uploadFile.fileUrl;
        };

        // 文件删除成功回调
        const handleAttachFileDelete = () => {
            // 将文件 URL 赋值给 formData.coverUrl
            formData.value.attachFileUrl = '';
        };

        // 关闭弹框
        const close = () => {
            emit('update:visible', false);
        };

        // 监听 bookData 的变化，同步更新表单数据
        Vue.watch(() => props.bookData, (newBookData) => {
            formData.value = newBookData ? {...newBookData} : {...initialValue};
        }, {immediate: true});

        // 返回表单数据及方法
        return {
            formData,
            submitForm,
            close,
            handleCoverUpload,
            handleCoverDelete,
            handleAttachFileUpload,
            handleAttachFileDelete
        };
    }
};
